<template>
	<view>
		<view class="modelBox">
			<view class="font-32 font-weight m-b-20 m-t-50">用户反馈</view>
			<textarea name="te" v-model="content" placeholder="您在哪个页面，遇到了什么问题，详细描述有助于帮您快速解决"
			 id="" placeholder-class="font-28" cols="30" rows="10"></textarea>
			 <view class="flex" style="flex-wrap: wrap;">
			 	<image @click="addImg" src="/static/icon/addimg.png" class="addimg" mode=""></image>
				<view v-for="(item,i) in images" :key="i" class="addimgBox">
					<view class="iconfontA" style="text-align: center;" @click="closeImg(i)">
						<view class="iconfont icon-guanbishixin"></view>
					</view>
					<image  :src="$util.img(item)" mode="" class="addimg"></image>
				</view>
			 </view>
		</view>
		<view class="bomPosition">
		<button type="primary" @click="submit">提交反馈</button>
		</view>
		<uv-toast ref="uToast"></uv-toast>
	</view>
</template>

<script>
	import config from "@/common/js/config.js"
	export default {
		data() {
			return {
				value:5,
				content:'',
				images:[]
			};
		},
		mixins: ['config'],
		onLoad() {
			this.images = []
		},
		methods:{
			submit() {
				this.$api.sendRequest({
					url:'/api/Feedback/feedback',
					data:{
						content:this.content,
						images:this.images.toString()
					},success:res=>{
						if(res.code==1) {
							this.$refs.uToast.show({
								type: 'default',
								message: res.msg,
								duration:1000
							})
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
						}else {
							this.$refs.uToast.show({
								type: 'default',
								message: res.msg,
								duration:1000
							})
						}
					}
				})
			},
			// 上传图片
			addImg() {
				uni.chooseImage({
					count: 1,
					success: res => {
						console.log(res,'++++');
						uni.uploadFile({
							url: `${config.baseUrl}api/Common/upload`,
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: resA => {
								let a = JSON.parse(resA.data)
								this.images.push(a.data.url)
								this.$forceUpdate()
							},
							fail(err) {
								console.log(err, 'err+++');
							}
						});
					},fail:err=> {
						console.log(err,'+++++');
					}
				})
			
			},
			
			// 删除图片
			closeImg(i) {
				this.images.splice(i, 1)
			},
		
		}
	}
</script>

<style lang="scss">
page {
	background-color: #EFF4F6;
}
.addimgBox {
	width: 150rpx;
	height: 150rpx;
	position: relative;
	.iconfontA {
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		// background-color: #dcdcdc;
		width: 30rpx;
		height: 30rpx;
		text-align: center;
		border-radius: 50%;
		line-height: 30rpx;
	}
	.iconfont {
		line-height: 30rpx;
		color: red;
		text-align: center;
		font-size: 40rpx;
	}
}
.addimg {
	width: 150rpx;
	height: 150rpx;
	border-radius: 10rpx;
}
</style>
